<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Gentelella Alela! | Vector Maps</title>

  <!-- Compiled CSS (includes Bootstrap, Font Awesome, and all vendor styles) -->
  <script type="module" src="/src/main-core.js"></script>
</head>


<body class="nav-md page-maps">

  <div class="container body">


    <div class="main_container">

      <div class="col-md-3 left_col">
        <div class="left_col scroll-view">

          <div class="navbar nav_title" style="border: 0;">
            <a href="index.html" class="site_title"><img src="images/logo.svg" alt="Gentelella Alela!" class="logo-full" style="height: 40px;"><img src="images/logo-icon.svg" alt="Gentelella" class="logo-icon" style="height: 30px; display: none;"></a>
          </div>

          <!-- menu prile quick info -->
          <div class="profile clearfix">
            <div class="profile_pic">
              <img src="images/img.jpg" alt="..." class="img-circle profile_img">
            </div>
            <div class="profile_info">
              <span>Welcome,</span>
              <h4>John Doe</h4>
            </div>
          </div>
          <!-- /menu prile quick info -->

          <br />

          <!-- sidebar menu -->
          <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">

            <div class="menu_section">
              <h3>General</h3>
              <ul class="nav side-menu">
                <li><a><i class="fas fa-home"></i> Home <span class="fas fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="index.html">Dashboard</a>
                    <li><a href="index2.html">Dashboard2</a>
                    <li><a href="index3.html">Dashboard 3</a>
                  </ul>
                <li><a><i class="fas fa-edit"></i> Forms <span class="fas fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="form.html">General Form</a>
                    <li><a href="form_advanced.html">Advanced Components</a>
                    <li><a href="form_validation.html">Form Validation</a>
                    <li><a href="form_wizards.html">Form Wizard</a>
                    <li><a href="form_upload.html">Form Upload</a>
                    <li><a href="form_buttons.html">Form Buttons</a>
                  </ul>
                <li><a><i class="fas fa-desktop"></i> UI Elements <span class="fas fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="general_elements.html">General Elements</a>
                    <li><a href="media_gallery.html">Media Gallery</a>
                    <li><a href="typography.html">Typography</a>
                    <li><a href="icons.html">Icons</a>
                    
                    <li><a href="widgets.html">Widgets</a>
                    <li><a href="invoice.html">Invoice</a>
                    <li><a href="inbox.html">Inbox</a>
                    <li><a href="calendar.html">Calendar</a>
                  </ul>
                <li><a><i class="fas fa-table"></i> Tables <span class="fas fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="tables.html">Tables</a>
                    <li><a href="tables_dynamic.html">Table Dynamic</a>
                  </ul>
                <li><a><i class="fas fa-chart-column"></i> Data Presentation <span class="fas fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="chartjs.html">Chart JS</a>
                    <li><a href="chartjs2.html">Chart JS2</a>
                    <li><a href="chart3.html">Chart JS3</a>
                    <li><a href="echarts.html">ECharts </a>
                    <li><a href="other_charts.html">Other Charts </a>
                  </ul>
                <li><a><i class="fas fa-clone"></i>Layouts <span class="fas fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="fixed_sidebar.html">Fixed Sidebar</a>
                    <li><a href="fixed_footer.html">Fixed Footer</a>
                  </ul>
              </ul>
            </div>
            <div class="menu_section">
              <h3>Live On</h3>
              <ul class="nav side-menu">
                <li><a><i class="fas fa-bug"></i> Additional Pages <span class="fas fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="e_commerce.html">E-commerce</a>
                    <li><a href="e_commerce_backend.html">E-commerce Backend</a>
                    <li><a href="projects.html">Projects</a>
                    <li><a href="project_detail.html">Project Detail</a>
                    <li><a href="contacts.html">Contacts</a>
                    <li><a href="profile.html">Profile</a>
                    <li><a href="real_estate.html">Real Estate</a>

                  </ul>
                <li><a><i class="fas fa-window-restore"></i> Extras <span class="fas fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li><a href="page_403.html">403 Error</a>
                    <li><a href="page_404.html">404 Error</a>
                    <li><a href="page_500.html">500 Error</a>
                    <li><a href="coming_soon.html">Coming Soon</a>
                    <li><a href="plain_page.html">Plain Page</a>
                    <li><a href="login.html">Login Page</a>
                    <li><a href="sign_up.html">SignUp Page</a>
                    <li><a href="pricing_tables.html">Pricing Tables</a>

                  </ul>
                <li><a href="landing.html"><i class="fas fa-laptop"></i> Landing Page</a>
              </ul>
            </div>

          </div>
          <!-- /sidebar menu -->

          <!-- /menu footer buttons -->
          <div class="sidebar-footer hidden-small">
            <a data-bs-toggle="tooltip" data-bs-placement="top" title="Settings">
              <span class="fas fa-cog" aria-hidden="true"></span>
            </a>
            <a data-bs-toggle="tooltip" data-bs-placement="top" title="FullScreen">
              <span class="fas fa-expand" aria-hidden="true"></span>
            </a>
            <a data-bs-toggle="tooltip" data-bs-placement="top" title="Lock">
              <span class="fas fa-eye-slash" aria-hidden="true"></span>
            </a>
            <a data-bs-toggle="tooltip" data-bs-placement="top" title="Logout" href="login.html">
              <span class="fas fa-power-off" aria-hidden="true"></span>
            </a>
          </div>
          <!-- /menu footer buttons -->
        </div>
      </div>

      <!-- top navigation -->
      <div class="top_nav">
          <div class="nav_menu">
              <div class="nav toggle">
                <a id="menu_toggle"><i class="fas fa-bars"></i></a>
              </div>
              <nav class="nav navbar-nav">
              <ul class="navbar-right">
                <li class="nav-item dropdown open" style="padding-left: 15px;">
                  <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="images/img.jpg" alt="">John Doe
                  </a>
                  <div class="dropdown-menu dropdown-usermenu float-end" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item"  href="javascript:;"> Profile</a>
                      <a class="dropdown-item"  href="javascript:;">
                        <span class="badge bg-red float-end">50%</span>
                        <span>Settings</span>
                      </a>
                  <a class="dropdown-item"  href="javascript:;">Help</a>
                    <a class="dropdown-item"  href="login.html"><i class="fas fa-sign-out-alt float-end"></i> Log Out</a>
                  </div>

                <li role="presentation" class="nav-item dropdown open">
                  <a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-envelope"></i>
                    <span class="badge bg-green">6</span>
                  </a>
                  <ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
                    <li class="nav-item">
                      <a class="dropdown-item">
                        <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                        <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                        <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                      </a>
                    <li class="nav-item">
                      <a class="dropdown-item">
                        <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                        <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                        <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                      </a>
                    <li class="nav-item">
                      <a class="dropdown-item">
                        <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                        <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                        <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                      </a>
                    <li class="nav-item">
                      <a class="dropdown-item">
                        <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
                        <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                        <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                      </a>
                    <li class="nav-item">
                      <div class="text-center">
                        <a class="dropdown-item">
                          <strong>See All Alerts</strong>
                          <i class="fas fa-angle-right"></i>
                        </a>
                      </div>
                  </ul>
              </ul>
            </nav>
          </div>
        </div>
      <!-- /top navigation -->

      <!-- page content -->


      <div class="right_col" role="main">
        <div class="">
          <div class="page-title">
            <div class="title_left">
              <h3>Vector Maps <small>Leaflet.js</small></h3>
            </div>
          </div>
          <div class="clearfix"></div>
          <div class="row">
            <div class="col-md-12">
              <div class="x_panel">
                <div class="x_title">
                  <h4>World Map</h4>
                  <div class="clearfix"></div>
                </div>
                <div class="x_content">
                  <div id="leaflet-map" style="height: 500px;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- /page content -->

      <!-- footer content -->
      <footer>
        <div class="float-end">
          Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
        </div>
        <div class="clearfix"></div>
      </footer>
      <!-- /footer content -->
    </div>
  </div>

  <script>
    // Initialize Leaflet map when page loads
    document.addEventListener('DOMContentLoaded', async function() {
      try {
        // Load the charts module which includes Leaflet
        const charts = await loadModule('charts');
        
        // Initialize the Leaflet map
        const map = L.map('leaflet-map').setView([40.7128, -74.0060], 4);
        
        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        
        // Add some sample markers
        const cities = [
          { name: 'New York', lat: 40.7128, lng: -74.0060 },
          { name: 'London', lat: 51.5074, lng: -0.1278 },
          { name: 'Tokyo', lat: 35.6762, lng: 139.6503 },
          { name: 'Sydney', lat: -33.8688, lng: 151.2093 },
          { name: 'São Paulo', lat: -23.5505, lng: -46.6333 }
        ];
        
        cities.forEach(city => {
          L.marker([city.lat, city.lng])
            .addTo(map)
            .bindPopup(`<b>${city.name}</b><br>Sample location marker`);
        });
        
      } catch (error) {
        document.getElementById('leaflet-map').innerHTML = 
          '<div class="d-flex align-items-center justify-content-center h-100"><div class="text-center"><i class="fas fa-map fa-3x text-muted mb-3"></i><p class="text-muted">Map failed to load</p></div></div>';
      }
    });
  </script>

</body>

</html>